<template>
    <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="二维码(包含)">
                <el-input v-model="formInline.qecode" clearable />
            </el-form-item>
            <el-form-item label="BOM编号(包含)">
                <el-input v-model="formInline.bomcode" clearable />
            </el-form-item>
            <el-form-item label="产品编码(包含)">
                <el-input v-model="formInline.productcode" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getTableData()" style="background-color: teal;"><el-icon>
                        <Search />
                    </el-icon></el-button>
            </el-form-item>
        </el-form>
    </div>
    <el-button size="small" style="background-color: orangered;color: white;" @click="deleteanageOperational"><el-icon>
            <Delete />
        </el-icon>批量删除</el-button>
    <el-button size="small" style="background-color: teal;color: white;" @click="addProductMaintenance"><el-icon>
            <CirclePlus />
        </el-icon>添加</el-button>
    <el-table :data="tableData" style="width: 100%" border @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column property="productCode" label="产品编码" width="145" />
        <el-table-column property="productSequence" label="产品序列号" width="145" />
        <el-table-column property="processRoute" label="工艺路线">
            <template #default="scope">
                <el-tag type="primary" v-if="scope.row.processRoute == 1">磁阻传感器</el-tag>
                <el-tag type="success" v-if="scope.row.processRoute == 2">压力传感器</el-tag>
            </template>
        </el-table-column>
        <el-table-column property="bomCode" label="BOM编码" width="145" />
        <el-table-column property="qrCode" label="二维码" width="290" />
        <el-table-column property="batch" label="批次" />
        <el-table-column property="orderCode" label="订单编码" width="145" />
        <el-table-column property="producSpecifications" label="产品规格" />
        <el-table-column property="produceDate" label="创建时间">
            <template #default="scope">
                {{ scope.row.produceDate.substring(0, 10) }}
            </template>
        </el-table-column>
        <el-table-column property="quality" label="品质" />
        <el-table-column property="problemWorkstation" label="问题工位">
            <template #default="scope">
                {{ scope.row.problemWorkstation === '' ? '0' : scope.row.problemWorkstation }}
            </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" min-width="150">
            <template #default="scope">
                <el-button size="small" style="background-color: teal;color: white;"
                    @click="updateProductMaintenance(scope.row)"><el-icon>
                        <EditPen />
                    </el-icon>编辑</el-button>
                <el-button size="small" style="background-color: orangered;color: white;"
                    @click="deleteProductMaintenance(scope.row.productMaintenanceId)"><el-icon>
                        <Delete />
                    </el-icon>删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 新增弹窗 -->
    <el-dialog v-model="dialogTableVisible1" title="添加" width="1000" draggable>
        <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto">
            <div width="1000" height="1500">
                <el-form-item label="二维码/条形码" prop="qrCode">
                    <el-input v-model="ruleForm.qrCode" disabled />
                </el-form-item>
                <el-form-item label="产品编码" prop="productCode">
                    <el-input v-model="ruleForm.productCode" disabled />
                </el-form-item>
                <el-form-item label="产品序列号" prop="productSequence">
                    <el-input v-model="ruleForm.productSequence" disabled />
                </el-form-item>
                <el-form-item label="产品描述" prop="product">
                    <el-input v-model="ruleForm.product" />
                </el-form-item>
                <el-form-item label="BOM编码" prop="bomCode">
                    <el-input v-model="ruleForm.bomCode" disabled />
                </el-form-item>
                <el-form-item label="批次" prop="batch">
                    <el-input v-model="ruleForm.batch" />
                </el-form-item>
                <el-form-item label="订单编码" prop="orderCode">
                    <el-input v-model="ruleForm.orderCode" disabled />
                </el-form-item>
                <el-form-item label="工艺线路" prop="processRoute">
                    <el-select v-model="ruleForm.processRoute">
                        <el-option label="请选择" :value="0" />
                        <el-option label="磁阻传感器" :value="1" />
                        <el-option label="压力传感器" :value="2" />
                    </el-select>
                </el-form-item>
                <el-form-item label="产品规格" prop="producSpecifications">
                    <el-input v-model="ruleForm.producSpecifications" />
                </el-form-item>
                <el-form-item label="品质" prop="quality">
                    <el-select v-model="ruleForm.quality">
                        <el-option label="OK" value="OK" />
                        <el-option label="NO" value="NO" />
                    </el-select>
                </el-form-item>
                <el-form-item label="问题工位" prop="problemWorkstation" v-if="ruleForm.quality == 'NO'">
                    <el-input v-model="ruleForm.problemWorkstation" />
                </el-form-item>
                <el-form-item label="生产日期" prop="produceDate">
                    <el-input v-model="ruleForm.produceDate" type="date" />
                </el-form-item>
            </div>
        </el-form>
        <div style="margin-left: 850px;width: 800px;margin-top: 20px;">
            <el-form-item>
                <el-button type="primary" @click="submitForm1(ruleFormRef)">
                    确定
                </el-button>
                <el-button @click="dialogTableVisible1 = false">取消</el-button>
            </el-form-item>
        </div>
    </el-dialog>
    <!-- 更新弹窗 -->
    <el-dialog v-model="dialogTableVisible2" title="编辑" width="1000" draggable>
        <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto">
            <div width="1000" height="1500">
                <el-form-item label="二维码/条形码" prop="qrCode">
                    <el-input v-model="ruleForm.qrCode" disabled />
                </el-form-item>
                <el-form-item label="产品编码" prop="productCode">
                    <el-input v-model="ruleForm.productCode" disabled />
                </el-form-item>
                <el-form-item label="产品序列号" prop="productSequence">
                    <el-input v-model="ruleForm.productSequence" disabled />
                </el-form-item>
                <el-form-item label="产品描述" prop="product">
                    <el-input v-model="ruleForm.product" />
                </el-form-item>
                <el-form-item label="BOM编码" prop="bomCode">
                    <el-input v-model="ruleForm.bomCode" disabled/>
                </el-form-item>
                <el-form-item label="批次" prop="batch">
                    <el-input v-model="ruleForm.batch" />
                </el-form-item>
                <el-form-item label="订单编码" prop="orderCode">
                    <el-input v-model="ruleForm.orderCode" disabled/>
                </el-form-item>
                <el-form-item label="工艺线路" prop="processRoute">
                    <el-select v-model="ruleForm.processRoute">
                        <el-option label="请选择" :value="0" />
                        <el-option label="磁阻传感器" :value="1" />
                        <el-option label="压力传感器" :value="2" />
                    </el-select>
                </el-form-item>
                <el-form-item label="产品规格" prop="producSpecifications">
                    <el-input v-model="ruleForm.producSpecifications" />
                </el-form-item>
                <el-form-item label="品质" prop="quality">
                    <el-select v-model="ruleForm.quality">
                        <el-option label="OK" value="OK" />
                        <el-option label="NO" value="NO" />
                    </el-select>
                </el-form-item>
                <el-form-item label="问题工位" prop="problemWorkstation" v-if="ruleForm.quality == 'NO'">
                    <el-input v-model="ruleForm.problemWorkstation" />
                </el-form-item>
                <el-form-item label="生产日期" prop="produceDate">
                    <el-input v-model="ruleForm.produceDate" type="date" />
                </el-form-item>
            </div>
        </el-form>
        <div style="margin-left: 850px;width: 800px;margin-top: 20px;">
            <el-form-item>
                <el-button type="primary" @click="submitForm2(ruleFormRef)">
                    确定
                </el-button>
                <el-button @click="dialogTableVisible2 = false">取消</el-button>
            </el-form-item>
        </div>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, type FormInstance, type FormRules, ElMessageBox } from 'element-plus'
import http from '@/api/http';

onMounted(() => {
    getTableData()
})

const tableData = ref([])

const formInline = reactive({
    qecode: '',
    bomcode: '',
    productcode: ''
})

const getTableData = () => {
    http.get('/api/ProductManagement/GetProductMaintenance?qecode=' + formInline.qecode + '&bomcode=' + formInline.bomcode + '&productcode=' + formInline.productcode).then(res => {
        tableData.value = res.data
    })
}

//#region 新增
const dialogTableVisible1 = ref(false)
const addProductMaintenance = () => {
    ruleForm.productMaintenanceId = 0
    ruleForm.productCode = ""
    ruleForm.productSequence = ""
    ruleForm.product = ""
    ruleForm.bomCode = ""
    ruleForm.batch = ""
    ruleForm.orderCode = ""
    ruleForm.processRoute = 0
    ruleForm.producSpecifications = ""
    ruleForm.quality = ""
    ruleForm.problemWorkstation = ""
    ruleForm.produceDate = ""
    ruleForm.qrCode = ""
    getCodedata()
    getproductCode()
    getproductSequence()
    getbomcode()
    getorderCode()
    dialogTableVisible1.value = true
}
const ruleFormRef = ref<FormInstance>()
const getCodedata = () => {
    http.get('/api/TeamManagement/GetCode').then(res => {
        console.log(res)
        ruleForm.qrCode = res.toString()
    })
}
const getproductCode = () => {
    http.get('api/Bom/GetBomCode').then(res => {
        ruleForm.productCode = res.toString();

    })
}
const getproductSequence = () => {
    http.get('api/Bom/GetBomCode').then(res => {
        ruleForm.productSequence = res.toString();

    })
}
const getbomcode = () => {
    http.get('api/Bom/GetBomCode').then(res => {
        ruleForm.bomCode = res.toString();

    })
}
const getorderCode = () => {
    http.get('api/Bom/GetBomCode').then(res => {
        ruleForm.orderCode = res.toString();

    })
}
const ruleForm = reactive({
    "productMaintenanceId": 0,
    "productCode": "",
    "productSequence": "",
    "product": "",
    "bomCode": "",
    "batch": "",
    "orderCode": "",
    "processRoute": 0,
    "producSpecifications": "",
    "quality": "",
    "problemWorkstation": "",
    "produceDate": "",
    "qrCode": ""
})

const rules = reactive<FormRules>({
    qrCode: [
        { required: true, message: '二维码/条形码不能为空', trigger: 'blur' },
    ],
    productCode: [
        {
            required: true,
            message: '产品编码不能为空',
            trigger: 'blur',
        },
    ],
    productSequence: [
        {
            required: true,
            message: '产品序列码不能为空',
            trigger: 'blur',
        },
    ],
    product: [
        {
            required: true,
            message: '产品描述不能为空',
            trigger: 'blur',
        },
    ],
    bomCode: [
        {
            required: true,
            message: 'BOM编码不能为空',
            trigger: 'blur',
        },
    ],
    batch: [
        {
            required: true,
            message: '批次不能为空',
            trigger: 'blur',
        },
    ],
    orderCode: [
        {
            required: true,
            message: '订单编码不能为空',
            trigger: 'blur',
        },
    ],
    processRoute: [
        {
            required: true,
            message: '工艺线路不能为空',
            trigger: 'blur',
        },
    ],
    producSpecifications: [
        { required: true, message: '产品规格不能为空', trigger: 'blur' },
    ],
    quality: [
        {
            required: true,
            message: '品质不能为空',
            trigger: 'blur',
        },
    ],
    problemWorkstation: [
        {
            required: true,
            message: '问题工位不能为空',
            trigger: 'blur',
        },
    ],
    produceDate: [
        {
            required: true,
            message: '生产日期不能为空',
            trigger: 'blur',
        },
    ]
})
const submitForm1 = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!', ruleForm)
            http.post('/api/ProductManagement/AddProductMaintenance', ruleForm).then(res => {
                ElMessage.success('新增成功')
                dialogTableVisible1.value = false
                getTableData()
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}
//#endregion

//#region 更新
const dialogTableVisible2 = ref(false)
const updateProductMaintenance = (row: any) => {
    ruleForm.productMaintenanceId = row.productMaintenanceId
    ruleForm.productCode = row.productCode
    ruleForm.productSequence = row.productSequence
    ruleForm.product = row.product
    ruleForm.bomCode = row.bomCode
    ruleForm.batch = row.batch
    ruleForm.orderCode = row.orderCode
    ruleForm.processRoute = row.processRoute
    ruleForm.producSpecifications = row.producSpecifications
    ruleForm.quality = row.quality
    ruleForm.problemWorkstation = row.problemWorkstation
    ruleForm.produceDate = row.produceDate
    ruleForm.qrCode = row.qrCode
    dialogTableVisible2.value = true
}
const submitForm2 = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!', ruleForm)
            http.post('/api/ProductManagement/UpdateProductMaintenance', ruleForm).then(res => {
                ElMessage.success('更新成功')
                dialogTableVisible2.value = false
                getTableData()
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

//#endregion

//#region 删除
const deleteProductMaintenance = (productMaintenanceId: number) => {
    ElMessageBox.confirm(
        '你确定要删除吗?',
        '删除',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            http.post('/api/ProductManagement/DeleteProductMaintenance?id=' + productMaintenanceId).then(res => {
                ElMessage.success('删除成功')
                getTableData()
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '删除被取消',
            })
        })
}


//#endregion

//#region批量删除
//多选
const pid: any = ref([])
const handleSelectionChange = (val: any) => {
    console.log('val', val)
    pid.value = val.map((x: any) => x.productMaintenanceId)


    console.log(pid.value)
}

const deleteanageOperational = () => {
    ElMessageBox.confirm(
        '你确定要删除这几个数据吗',
        '删除',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            http.post('/api/ProductManagement/DeleteAnageProductMaintenance?Id=' + pid.value.toString()).then(res => {
                ElMessage.success('删除成功')
                getTableData()
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '删除被取消',
            })
        })
}
//#endregion



</script>

<style scoped>
.page-container {
    padding: 32px 24px;
    background: #f7f8fa;
    min-height: 100vh;
}

.demo-form-inline {
    background: #fff;
    padding: 20px 24px 8px 24px;
    border-radius: 10px;
    margin-bottom: 18px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
}

.operation-bar {
    margin-bottom: 16px;
    display: flex;
    gap: 12px;
    align-items: center;
    background: #fff;
    padding: 12px 20px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.el-table {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.el-table th {
    font-size: 16px;
    font-weight: bold;
    background: linear-gradient(90deg, #e0f7fa 0%, #fff 100%);
    color: #008080;
}

.el-table td {
    font-size: 15px;
    text-align: center;
}

.el-table--striped .el-table__body tr.el-table__row--striped td {
    background: #f5f7fa;
}

.el-table__body tr:hover>td {
    background: #e0f7fa !important;
}

.el-dialog {
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
}

.el-dialog__body {
    padding: 20px 20px 8px 20px;
}

.el-form {
    margin: 0 auto;
    max-width: 700px;
}

.el-form-item {
    margin-bottom: 12px;
}

.el-input,
.el-select {
    min-width: 160px;
}

.el-button {
    border-radius: 6px;
    font-weight: 500;
    background: linear-gradient(90deg, #26c6da 0%, #00acc1 100%);
    color: #fff;
    border: none;
    transition: box-shadow 0.2s, background 0.2s;
}

.el-button:hover {
    box-shadow: 0 2px 8px rgba(38, 198, 218, 0.15);
    background: linear-gradient(90deg, #00acc1 0%, #26c6da 100%);
}

.el-button+.el-button {
    margin-left: 8px;
}

/* 响应式适配 */
@media (max-width: 600px) {
    .page-container {
        padding: 8px 2px;
    }

    .el-form,
    .el-dialog__body {
        padding: 0 !important;
        max-width: 100vw;
    }

    .el-table th,
    .el-table td {
        font-size: 13px;
    }
}

/* 适配深色模式 */
@media (prefers-color-scheme: dark) {
    .page-container {
        background: #181a1b;
    }

    .demo-form-inline,
    .operation-bar,
    .el-table {
        background: #23272e;
        color: #eee;
    }

    .el-table th,
    .el-table td {
        color: #eee;
    }

    .el-table th {
        background: linear-gradient(90deg, #263238 0%, #23272e 100%);
        color: #26c6da;
    }

    .el-table--striped .el-table__body tr.el-table__row--striped td {
        background: #23272e;
    }

    .el-table__body tr:hover>td {
        background: #2a2d34 !important;
    }

    .el-dialog {
        background: #23272e;
        color: #eee;
    }
}
</style>